
*{
  padding: 0;margin: 0;
  box-sizing: border-box;
}
#app{

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
background-color: #226666;
}
.container{
  position: relative;
  width: 320px;
  height: 320px;
  /* border-radius: 50%; */
}
.circle{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 font-size: 3rem;
 user-select: none;
 border:  10px solid #fff;
color: #fff;
  z-index: 10;
}
.circle-bar{
  position: absolute;
  left: 145px ;
 top : -10px;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: red;
 box-shadow:  0 0  1px 1px #cccc;
 cursor: pointer;
  z-index: 20;
}